<template>
  <div class="g-bd">
    <div class="main f-fl" v-if="radioDetail">
      <div class="detail-wrap clearfix">
        <!-- 歌曲照片 -->
        <div class="cvrwrap f-fl">
          <div class="u-cover">
            <img alt="" :src="radioDetail.picUrl + '?param=200y200'" />
            <span class="msk"></span>
          </div>
        </div>
        <!-- 歌曲详细内容 -->
        <div class="detail f-fr">
          <div class="hd">
            <div class="u-icn"></div>
            <div class="tit">{{ radioDetail.name }}</div>
          </div>
          <!-- 歌手 -->
          <div class="user" v-if="radioDetail.dj">
            <a href="javascript:;" class="avatar" @click="$router.push('/user/home?id='+radioDetail.dj.userId)"
              ><img :src="radioDetail.dj.avatarUrl + '?param=40y40'" alt=""
            /></a>
            <span class="name"
              ><a href="javascript:;" @click="$router.push('/user/home?id='+radioDetail.dj.userId)">{{ radioDetail.dj.nickname }}</a></span
            >
            <img :src="radioDetail.dj.avatarDetail.identityIconUrl" alt="" />
          </div>
          <!-- 操作按钮 -->
          <div class="tmhi-btn">
            <a
              href="javascript:;"
              class="subscribed-count u-btn2"
              @click="$Message({ msg: '功能尚未开发' })"
              ><i>订阅({{ radioDetail.subCount | CountFormat }})</i></a
            >
            <a href="javascript:;" class="play u-btn2" title="播放" @click="setPalyList"
              ><i>播放全部</i></a
            >
            <a
              href="javascript:;"
              class="share-count u-btn2 btn2"
              @click="$Message({ msg: '功能尚未开发' })"
              ><i>分享({{ radioDetail.shareCount | CountFormat }})</i></a
            >
          </div>
          <!-- 描述 -->
          <div class="desc">
            <span class="title"
              ><router-link
                :to="`/discover/djradio/category?cateId=${radioDetail.categoryId}`"
                class="rcmd"
                >音乐推荐</router-link
              ></span
            >
            <div class="txt" v-html="radioDetail.desc"></div>
          </div>
        </div>
      </div>
      <!-- 榜单列表 -->
      <div class="tm-list">
        <!-- 榜单标题 -->
        <div class="tml-title">
          <h3>歌曲列表</h3>
          <span class="sub"
            >共<span>{{ radioDetail.programCount }}</span
            >期</span
          >
          <!-- <span>{{  }}</span
            >首歌</span
          > -->
          <div class="u-sort">
            <a
              href="javascript:viod(0);"
              title="降序"
              class="down"
              :class="!asc ? 'z-sel' : ''"
              @click="changeSort"
            ></a>
            <a
              href="javascript:viod(0);"
              title="升序"
              class="up"
              :class="asc ? 'z-sel' : ''"
              @click="changeSort"
            ></a>
          </div>
          <div class="outer-link">
            <i class="u-icn"></i>
            <a href="javascript:;" @click="$Message({ msg: '功能尚未开发' })">生成外链播放器</a>
          </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="tml-song-list">
          <div class="tmls-wrap">
            <table>
              <tbody>
                <tr
                  v-for="(item, index) in programs"
                  :key="item.id"
                  :class="index % 2 === 0 ? 'even' : ''"
                >
                  <!-- 排名 -->
                  <td class="tb-hd">
                    <div class="hd">
                      <span class="num">{{ item.serialNum }}</span>
                      <div class="ply" @click="playProgram(item)">
                        <span
                          class="icon"
                          :class="item.mainSong.id === currentSongId ? 'z-sel' : ''"
                        ></span>
                      </div>
                    </div>
                  </td>
                  <!-- 歌名 -->
                  <td class="title-tb">
                    <div class="dec">
                      <span class="decwrap">
                        <span class="txt"
                          ><router-link :to="`/program?id=${item.id}`">{{
                            item.name
                          }}</router-link></span
                        >
                      </span>
                    </div>
                    <div class="opt opt-show">
                      <a
                        href="javascript:;"
                        class="u-icn add"
                        title="添加到播放列表"
                        @click="addToPlayList(item)"
                      ></a>
                      <span
                        class="u-table icn-share"
                        title="分享"
                        @click="$Message({ msg: '功能尚未开发' })"
                      ></span>
                      <span
                        class="u-table icn-dl"
                        title="下载"
                        @click="$Message({ msg: '功能尚未开发' })"
                      ></span>
                    </div>
                  </td>
                  <!-- 播放 -->
                  <td class="playcount">播放{{ item.listenerCount | CountFormat }}</td>
                  <!-- 赞 -->
                  <td class="likecount">赞{{ item.likedCount | CountFormat }}</td>
                  <!-- 创建日期 -->
                  <td class="creattime">{{ item.createTime | createTimeFormat }}</td>
                  <!-- 时长 -->
                  <td class="duration-tb">
                    <span class="dura">{{ item.duration | songDuration }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="aside f-fr">
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="~@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="~@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import { CountFormat, createTimeFormat, songDuration } from '@/utils/filters.js'
export default {
  data() {
    return {
      // 电台详情
      radioDetail: null,
      // 电台节目
      programs: null,
      // 电台节目总数
      total: 0,
      // 电台节目排序方式
      asc: false
      // 歌单介绍是否展开
      // flat: false,
      // hotList: null
    }
  },
  methods: {
    // 获取电台详情
    async getRadioDetail() {
      const { data: res } = await this.$http.get(`/dj/detail?rid=${this.$route.query.id}`)
      this.radioDetail = res.data
    },
    // 获取电台节目
    async getProgram() {
      const { data: res } = await this.$http.get(
        `/dj/program?rid=${this.$route.query.id}&asc=${this.asc}`
      )
      this.programs = res.programs
      this.total = res.count
    },
    // 改变电台节目排序
    changeSort() {
      this.asc = !this.asc
      this.getProgram()
    },
    // 全部播放
    setPalyList() {
      let tracks = []
      this.programs.forEach(item => {
        let track = item.mainSong
        track.al = track.album
        track.ar = track.artists
        track.al.id = track.id
        track.al.name = track.name
        track.al.picUrl = item.coverUrl
        track.dt = track.duration
        tracks.push(track)
      })
      // console.log(tracks)
      this.$store.commit('Music/setSongList', tracks)
      // this.$store.commit('Music/setplayerSettingIndex',0)
    },
    // 添加到播放列表
    addToPlayList(item) {
      let track = item.mainSong
      track.al = track.album
      track.ar = track.artists
      track.al.id = track.id
      track.al.name = track.name
      track.al.picUrl = item.coverUrl
      track.dt = track.duration
      this.$store.commit('Music/pushSongList', track)
    },
    // 播放单个节目
    playProgram(item) {
      let track = item.mainSong
      track.al = track.album
      track.ar = track.artists
      track.al.id = track.id
      track.al.name = track.name
      track.al.picUrl = item.coverUrl
      track.dt = track.duration
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(track.id)) {
        index = songidList.findIndex(item => item === track.id)
      } else {
        this.$store.commit('Music/pushSongList', track)
      }
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  computed: {
    currentSongId() {
      const id = this.$store.state.Music.currentSong.id
        ? this.$store.state.Music.currentSong.id
        : undefined
      return id
    }
  },
  created() {
    this.getRadioDetail()
    this.getProgram()
    // this.getHotPlayList()
    // this.getLrc()
    // this.getSimSong()
  },
  filters: {
    CountFormat,
    createTimeFormat,
    songDuration
    // createTimeFormat(val) {
    //   const updateTime = new Date(val)
    //   const y = updateTime.getFullYear()
    //   const m = updateTime.getMonth() + 1
    //   const d = updateTime.getDate()
    //   const m2 = m.toString().padStart(2, '0')
    //   const d2 = d.toString().padStart(2, '0')
    //   return y + '-' + m2 + '-' + d2
    // }
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  overflow: hidden;
  .main {
    width: 708px;
    border-right: 1px solid #ccc;
    padding: 37px 30px 40px 39px;
    .detail-wrap {
      // overflow: hidden;
      .cvrwrap {
        .u-cover {
          width: 200px;
          height: 200px;
          float: left;
          position: relative;
          display: inline;
          margin: 0 -220px 0 0;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .msk {
            width: 208px;
            height: 208px;
            background-position: 0 -1285px;
            top: -4px;
            left: -4px;
          }
        }
      }
      .detail {
        // margin-top: 10px;
        width: 414px;
        text-align: left;
        .hd {
          margin-bottom: 12px;
          .u-icn {
            float: left;
            width: 54px;
            height: 24px;
            background-position: 0 -1014px;
          }
          .tit {
            margin-left: 64px;
            position: relative;
            top: -1px;
            font-size: 20px;
            line-height: 24px;
            font-weight: normal;
          }
        }

        .user {
          margin: 0 0 20px;
          line-height: 35px;
          .avatar {
            margin-right: 10px;
            float: left;
            width: 35px;
            height: 35px;
            img {
              float: left;
              width: 35px;
              height: 35px;
            }
          }
          .name {
            float: left;
            line-height: 35px;
            a {
              color: #0c73c2;
            }
          }
          img {
            height: 13px;
            width: 13px;
            display: inline-block;
            vertical-align: middle;
          }
          .time {
            margin-left: 15px;
            color: #999;
          }
        }
        .tmhi-btn {
          // position: relative;
          margin-bottom: 25px;
          margin-right: -10px;
          height: 31px;
          .play {
            float: left;
            display: inline-block;
            width: 90px;
            height: 31px;
            margin-right: 6px;
            padding-right: 5px;
            background-position: right -2325px;
            // background: url(../../assets/images/button2.png) no-repeat right -428px;
            line-height: 31px;
            color: #fff;
            i {
              display: inline-block;
              width: 84px;
              height: 31px;
              padding-right: 10px;
              padding-left: 31px;
              line-height: 31px;
              background-position: 0 -2285px;
              color: #000;
            }
          }
          .subscribed-count {
            float: left;
            height: 31px;
            line-height: 20px;
            min-width: 23px;
            margin-right: 6px;
            padding-right: 2px;
            cursor: pointer;
            font-family: simsun, \5b8b\4f53;
            background-position: right -2163px;
            i {
              display: block;
              height: 31px;
              line-height: 30px;
              min-width: 23px;
              cursor: pointer;
              padding-right: 2px;
              padding-left: 28px;
              background-position: 0 -2125px;
              color: #fff;
            }
            &:hover {
              text-decoration: none;
            }
          }
          .share-count {
            background-position: right -1020px;
            i {
              background-position: 0 -1225px;
            }
          }
          .btn2 {
            float: left;
            height: 31px;
            line-height: 20px;
            min-width: 23px;
            margin-right: 6px;
            padding-right: 2px;
            cursor: pointer;
            font-family: simsun, \5b8b\4f53;
            i {
              float: left;
              height: 31px;
              line-height: 30px;
              min-width: 23px;
              cursor: pointer;
              display: block;
              padding-right: 2px;
              padding-left: 28px;
            }
          }
        }
        .desc {
          margin-top: 4px;
          line-height: 18px;
          color: #666;
          .title {
            float: left;
            a {
              margin-right: 7px;
              color: #cc0000;
              display: inline-block;
              position: relative;
              top: -1px;
              height: 16px;
              overflow: hidden;
              padding: 0 6px;
              border: 1px solid #cc0000;
              line-height: 16px;
              vertical-align: middle;
              font-size: 12px;
            }
          }
        }
      }
    }
    .tm-list {
      margin-top: 27px;
      padding-bottom: 40px;
      .tml-title {
        height: 33px;
        border-bottom: 2px solid #c20c0c;
        h3 {
          float: left;
          font-size: 20px;
          line-height: 28px;
          font-weight: normal;
        }
        .sub {
          float: left;
          margin: 9px 0 0 20px;
          color: #666;
        }
        .outer-link {
          float: right;
          margin-top: 4px;
          margin-right: 20px;
          .u-icn {
            width: 16px;
            height: 16px;
            background-position: -34px -863px;
          }
          a {
            margin-left: 10px;
            color: #0c73c2;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .u-sort {
          float: right;
          width: 57px;
          height: 27px;
          a {
            float: left;
            height: 25px;
            width: 29px;
            &.down {
              background-position: 0 0;
              &:hover {
                background-position: 0 -60px;
              }
            }
            &.up {
              width: 28px;
              background-position: -40px 0;
              &:hover {
                background-position: -40px -60px;
              }
            }
            &.z-sel {
              background-position-y: -30px;
              &:hover {
                background-position-y: -30px;
              }
            }
          }
        }
      }
      .tml-song-list {
        .tmls-wrap {
          table {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            border: 1px solid #d9d9d9;
            thead {
              th {
                height: 38px;
                background-color: #f7f7f7;
                vertical-align: top;
                text-align: left;
                font-weight: normal;
                color: #666;
                background: url(~@/assets/images/header/table.png);
                background-position: 0 0;
                background-repeat: repeat-x;
                .wp {
                  height: 18px;
                  line-height: 18px;
                  padding: 8px 10px;
                  background: url(~@/assets/images/header/table.png) no-repeat;
                  background-position: 0 -56px;
                  box-sizing: content-box;
                }
                .wp-dura {
                  width: 91px;
                }
              }
              .rank-hd {
                width: 54px;
                background-position: 0 0;
              }
              .title-hd {
                width: 236px;
              }
              .duration-hd {
                width: 111px;
                box-sizing: content-box;
              }
              .singer-hd {
                width: 90px;
              }
              .album-hd {
                width: 127px;
              }
            }
            tbody {
              tr {
                height: 55px;
                &.even {
                  background-color: #f7f7f7;
                }
                &:hover .title-tb .opt-show {
                  display: block;
                }
                &:hover .title-tb .dec .decwrap {
                  max-width: 200px;
                }
                &:hover {
                  background-color: #ccc;
                }
                td {
                  padding: 0 10px;
                  line-height: 18px;
                  text-align: left;
                  background: url(~@/assets/images/header/table.png) no-repeat 0 9999px;
                }
                .hd {
                  width: 62px;
                  height: 18px;
                  .num {
                    float: left;
                    width: 25px;
                    margin-left: 0;
                    text-align: center;
                    color: #999;
                  }
                  .ply {
                    float: right;
                    width: 32px;
                    margin-right: -5px;
                    text-align: center;
                    .icon {
                      display: block;
                      float: none;
                      margin: 0 auto;
                      padding-left: 0;
                      width: 17px;
                      height: 17px;
                      overflow: hidden;
                      background: url(~@/assets/images/header/table.png) no-repeat;
                      background-position: 0 -103px;
                      &:hover {
                        // background-position: 0 0;
                        background-position: 0 -128px !important;
                      }
                      &.z-sel {
                        background-position: -20px -128px;
                        &:hover {
                          // background-position: 0 0;
                          background-position: -20px -128px !important;
                        }
                      }
                    }
                  }
                }
                .title-tb {
                  // float: left;
                  width: 240px;
                  padding-right: 10px;
                  position: relative;
                  line-height: 18px;
                  .dec {
                    // width: 200px;
                    // margin-right: 20px;
                    // line-height: 23px;
                    margin-top: 5px;

                    .decwrap {
                      // max-width: 99%;
                      display: inline-block;
                      max-width: 230px;
                      word-wrap: break-word;
                      position: relative;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      margin-right: -25px;
                      padding-right: 25px;
                      a {
                        color: #333;
                      }
                    }
                  }
                  .opt {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    display: none;
                    float: left;
                    transform: translateY(-50%);
                    .add {
                      float: left;
                      margin-top: 2px;
                      width: 13px;
                      height: 13px;
                      background-position: 0 -700px;
                      &:hover {
                        background-position: -22px -700px;
                      }
                    }
                    .icn-fav {
                      background-position: 0 -174px;
                      &:hover {
                        background-position: -20px -174px;
                      }
                    }
                    .icn-share {
                      background-position: 0 -195px;
                      &:hover {
                        background-position: -20px -195px;
                      }
                    }
                    .icn-dl {
                      background-position: -81px -174px;
                      &:hover {
                        background-position: -104px -174px;
                      }
                    }
                  }
                  .opt-show {
                    display: none;
                  }
                }
                .playcount {
                  width: 80px;
                  padding: 0 10px;
                  color: #666;
                }
                .likecount {
                  width: 90px;
                  padding: 0 10px;
                  color: #666;
                }
                .creattime {
                  width: 86px;
                  padding: 0 10px;
                  color: #999;
                }
                .duration-tb {
                  width: 60px;
                  color: #999;
                }
              }
            }
          }
        }
      }
      .play-list-more {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: -10px;
        p {
          font-size: 13px;
          color: #333333;
        }
        .download {
          width: 120px;
          height: 30px;
          background-image: linear-gradient(90deg, #ff5a4c 0%, #ff1d12 100%);
          border-radius: 18px;
          line-height: 30px;
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          text-decoration: none;
        }
      }
    }
  }
  .aside {
    position: relative;
    float: right;
    width: 270px;
    padding: 20px 40px 40px 30px;
    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 100%;
    }
    .piclist {
      margin-bottom: 25px;
      overflow: hidden;
      li {
        float: left;
        margin-bottom: 10px;
        display: inline;
        padding: 0 0 10px 10px;
        width: 50px;
        height: 50px;
      }
    }
    .hotlist {
      li {
        margin-bottom: 10px;
        .coverImg {
          float: left;
          width: 50px;
          height: 50px;
          margin-right: 5px;
          img {
            width: 100%;
          }
        }
        p {
          width: 140px;
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          .name {
            color: #000;
            font-size: 14px;
          }
          .by {
            color: #999;
          }
          .nickname {
            max-width: 106px;
            margin: 0 2px 0 4px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .identity {
            height: 13px;
            width: 13px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .download {
      margin: 20px 0;
      padding-bottom: 20px;
      .dllist {
        height: 65px;
        margin-bottom: 10px;
        background: url(~@/assets/images/sprite.png);
        background-position: 0 -392px;
        li {
          float: left;
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
          .ios {
          }
          .pc {
            width: 60px;
            margin: 0 26px 0 30px;
          }
          .aos {
          }
        }
      }
      p {
        color: #999;
      }
    }
    .wiki-edit {
      margin-bottom: 10px;
      display: block;
      text-align: left;
      line-height: 20px;
      img {
        vertical-align: middle;
        margin-top: -2px;
      }
    }
  }
}
</style>
